<template>
	<div>
		<Bread></Bread>
		<el-card>
			<el-button type="primary" @click="addCate">添加分类</el-button>
		</el-card>
		<!-- 表格区域 -->
		 <el-table
		    :data="categoriesData"
		    style="width: 100%;margin-bottom: 20px;"
		    row-key="cat_id"
		    border
		    default-expand-all
		    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
		    <el-table-column
		      type="index"
		      label="#"
		      width="180">
		    </el-table-column>
			<el-table-column
		      prop="cat_name"
		      label="分类名称"
		      width="180">
		    </el-table-column>
			<el-table-column
		      label="是否有效"
		      width="180">
			   <el-button type="success" icon="el-icon-check" circle size="mini"></el-button>
		    </el-table-column>
			<el-table-column
		      prop="cat_level"
		      label="排序"
		      width="180">
			   <template  slot-scope="scope">
				   <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
				   <el-tag type="success" v-if="scope.row.cat_level == 1">二级</el-tag>
				   <el-tag type="warning" v-if="scope.row.cat_level == 2">三级</el-tag>
			   </template>
		    </el-table-column>
			<el-table-column
		      label="操作"
		      width="180">
			   <el-button type="primary" icon="el-icon-edit"></el-button>
			   <el-button type="danger" icon="el-icon-delete"></el-button>
		    </el-table-column>
		  </el-table>
		  
		  
		  <!-- 对话框(添加) -->
		  <el-dialog
		    title="提示"
		    :visible.sync="addVisible"
		    width="30%">
			<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="分类名称" prop="cat_name">
			    <el-input v-model="addForm.cat_name"></el-input>
			  </el-form-item>
			  <el-form-item label="父级分类">
			      <el-cascader
				    v-model="value"
			        :options="addOptions"
			        :props="addKey"
					@change="handleChange"
			        clearable></el-cascader>
			  </el-form-item>
			</el-form>
		    <span slot="footer" class="dialog-footer">
		      <el-button @click="dialogVisible = false">取 消</el-button>
		      <el-button type="primary" @click="addCategoriesData('addForm')">确 定</el-button>
		    </span>
		  </el-dialog>
		  
	</div>
	
</template>
<script>
	import Bread from "@/components/bread"
	export default{
		components:{Bread},
		data(){
			return{
				categoriesData:[],
				queryInfo:{
					type:"",
					pagenum:"",
					pagesize:""
				},
				addVisible:false,
				addForm:{
					cat_pid:"",
					cat_name:"",
					cat_level:''
				},
				rules:{
					cat_name: [
					            { required: true, message: '请输入分类名称', trigger: 'blur' },
					    ]
				},
				addOptions:[],
				addKey:{
					checkStrictly : true,
					label:"cat_name",
					value:"cat_id",
					children:"children"
				},
				 value: []
			}
		},
		methods:{
			async getCategoriesData(){
				let {data:res} = await this.$axios.get("categories",{params:this.queryInfo});
				this.queryInfo.type = null;
				if(res.meta.status == 200) this.$message.success(res.meta.msg);
				return res
				
				// 请求方式和路径一样,封装axios请求,传递不同参数即可
				
				/* .then(res=>{
					console.log(res)
					if(res.meta.status == 200){
					this.$message.success(res.meta.msg)
					if(!falg){
						this.categoriesData = res.data
					}else{
						this.addOptions = res.data
					}
					}
				}) */
			},
			  addCate(){
				  this.addVisible = true
				  this.queryInfo.type = 2;
				  this.addOptions = this.getCategoriesData();
				  /* this.$axios.get("categories",{params:{type:2}})
				  .then(res=>{
					  if(res.meta.status == 200){
					  	this.$message.success(res.meta.msg)
					  	this.addOptions = res.data
					  }
				  }) */
			  },
			  // this.getCategoriesData()
			  addCategoriesData(formName){
				   this.$refs[formName].validate((valid) => {
				        if (valid) {
				          this.$axios.post("categories",this.addForm)
						  .then(res=>{
							  console.log(res)
							  if(res.meta.status == 201){
							  	this.$message.success(res.meta.msg)
							  	
								this.categoriesData = this.getCategoriesData();
								this.addVisible = false
							  }
						  })
				        } else {
				          console.log('error submit!!');
				          return false;
				        }
				})
			  },
			  handleChange(){
				  console.log(this.value)
				  if(this.value.length ==  0){
					  this.addForm.cat_pid = 0
					  this.addForm.cat_level = 0
				  }else{
					  this.addForm.cat_pid = this.value[this.value.length - 1];
					  this.addForm.cat_level = this.value.length;
				  }
			  }
		},
		created() {
			this.getCategoriesData()
		}
	}
</script>